<template>
	<div class="post-info-wrap">
		<div class="top-title">创作</div>

		<!-- tab切换 -->
		<div class="tab-wrap">
			<a v-for="(item,index) in tab" :key="index" class="tab-item" :class="{active:item.active}" @click="tabClick(item,tab)"><span>{{item.name}}</span></a>
			
			<el-button class="orange" size="mini" type="primary" @click="goPost">发布需求</el-button>
		</div>

		<!-- 内容列表页 -->
		<div class="content">
			<template v-if="data.length == 0">
				<div class="no-data">
					<img :src="nodata">
				</div>
			</template>

			<template v-if="data.length > 0">
				<div class="list">
					<li v-for="item in data" :key="item.id" class="list-item">
						<div class="list-item-header">
							<span class="code">信息号：{{item.id}}</span>
						</div>
						<div class="list-item-content">
							<li class="content-item img-item" @click="skipFrontDetail(item.id)">
								<img :src="getThum(item.imgIds)">
							</li>
							<li class="content-item desc-item">
								<span class="title" @click="skipFrontDetail(item.id)">{{item.title}}</span>
								<span class="time">{{item.endTime}}</span>
								<span class="detail">{{item.categoryName}}-{{item.secondCategoryName}}</span>
							</li>
							<li class="content-item status-item">
								<span class="status" v-html="convertStatus(item.status)"></span>
								<p class="scan">
									<span>浏览中 0</span>
									
								</p>
							</li>
							<li class="content-item oprate-item">
								<el-button type="text" size="mini" @click="edit(item.id)">修改</el-button>
								<el-button type="text" size="mini" @click="postRefresh(item.id)">刷新</el-button>
								
								<el-button type="text" size="mini" @click="del(item)">删除</el-button>
								<el-button type="text" size="mini" @click="fullyDel(item.id)">彻底删除</el-button>
								<el-button type="text" size="mini" @click="top(item.id)">置顶</el-button>
							</li>
							
						</div>
					</li>
				</div>

				<div class="content-pagination-wrap">
					<el-pagination
						background
					    layout="total, prev, pager, next"
					    :total="page.total">
					</el-pagination>
				</div>	
			</template>	
		</div>
	</div>
</template>


<script>
import { getList, del, edit, postRefresh, top } from "@/api/post-info/post"
import { validatenull } from "@/utils/validate"

import { baseUrl } from '@/config/env';
//获取图片的url
const imgPrefix = baseUrl+'/rest/common/preview/';

export default{
	data(){
		return {
			defaultThum:require("@/assets/dingNiu/default.jpg"),
			nodata:require("@/assets/dingNiu/nodata.png"),
			tab:[{
				name:'最新消息',
				value:'',
				active:true
			},
			{
				name:'显示中的消息',
				value:3,
				active:false
			},
			{
				name:'已上架的消息',
				value:2,
				active:false
			},
			{
				name:'已下架的消息',
				value:4,
				active:false
			},
			{
				name:'审核中的消息',
				value:1,
				active:false
			},
			{
				name:'已删除的消息',
				value:5,
				active:false
			}],
			page: {
    	  		pageSize: 10,
    	  		currentPage: 1,
    	  		total: 0
  	  		},
  	  		status:'',
  	  		data:[]
		}
	},
	mounted(){
		this.getList();
	},
	methods:{
		//获取众包列表
		getList(){
			getList(this.page.currentPage,this.page.pageSize,null,null,this.status).then((res) => {
				console.log("------众包列表------")
				console.log(res)
				var result = res.data.data;
				this.page.total = result.total;
				this.data = result.records;
			})
		},
		//tab页点击
		tabClick(item,list){
			if(item.value == this.status) return;

			for(var i=0;i<list.length;i++){
				list[i].active = false;
			}

			item.active = true;

			this.status = item.value;
			this.page.currentPage = 1;
			this.getList();
		},
		//获取缩略图
		getThum(imgs){
			if(validatenull(imgs)) return this.defaultThum;
			var temp = imgs.split(',');
			return imgPrefix+temp[0];
		},
		//转换status
		convertStatus(status){
			if(status == 1){
				return '<span style="color:#f90">审核中<span>'
			}
			if(status == 2){
				return '<span style="color:#03c">已上架<span>'
			}
			if(status == 3){
				return '<span style="color:#090">显示中<span>'
			}
			if(status == 4){
				return '<span style="color:#c00">已下架<span>'
			}
			if(status == 5){
				return '<span style="color:#f30">已删除<span>'
			}
		},
		//跳转需求页面
		goPost(){
			this.$router.push({
				path:'/post-info/post'
			})
		},
		//修改当前众包需求
		edit(id){
			this.$router.push({
				path:'/post-info/post',
				query:{id:id}
			})
		},
		del(item){
			
			this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          		confirmButtonText: '确定',
          		cancelButtonText: '取消',
          		type: 'warning'
        	}).then(()=>{
        		return edit({id:item.id,status:5});
        	}).then((res) => {

        		this.getList();
	          	this.$message({
	            	type: 'success',
	            	message: '删除成功!'
	          	});
        	}).catch(() => {
	          	this.$message({
	            	type: 'info',
	            	message: '已取消删除'
	          	});          
        	});
		},
		//删除
		fullyDel(id){
			this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          		confirmButtonText: '确定',
          		cancelButtonText: '取消',
          		type: 'warning'
        	}).then(()=>{
        		return del(id);
        	}).then((res) => {

        		this.getList();
	          	this.$message({
	            	type: 'success',
	            	message: '删除成功!'
	          	});
        	}).catch(() => {
	          	this.$message({
	            	type: 'info',
	            	message: '已取消删除'
	          	});          
        	});
		},
		//众包刷新
		postRefresh(id){
			postRefresh(id).then((res)=>{
				if(res.data.code == 200 && res.data.success){
					this.getList();
					this.$message({
						type: 'success',
	            		message: '刷新成功!'
					})
				}
			})
		},
		//众包置顶
		top(id){
			top(id).then((res)=>{
				if(res.data.code == 200 && res.data.success){
					this.getList();
					this.$message({
						type: 'success',
	            		message: '置顶成功!'
					})
				}
			})
		},
		//跳转前台详情页
		skipFrontDetail(id){
			const { href } = this.$router.resolve({
	            path:`/service/detail/${id}`
	        })
	        window.open(href,"_blank");
		}
	}
}


</script>



<style>
.oprate-item .el-button{
	margin-left: 0;
}

</style>



<style scoped>
.no-data{
	text-align: center;
}
.no-data>img{
	width: 300px;
	margin: auto;
	padding:70px 0;
}

.post-info-wrap{
	padding: 15px;
}

.top-title{
	padding: 15px 0;
	font-size: 16px;
	color: #ff8406;
	margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
    padding: 15px;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
}

.tab-wrap{
	margin: 20px 0;
	border-bottom: 1px solid #e5e5e5;
}

.tab-item{
	position: relative;
	border: 1px solid #e5e5e5;
	padding: 8px;
	font-size: 12px;
	margin-bottom: -1px;
	display: inline-block;
	color: #999;
	margin-right: 4px;
}

.tab-item.active{
	font-weight: 700;
	color: #000;
}
.tab-item.active:before{
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	top: -1px;
	left: 0;
	background: #ff8100;
}

.list-item{
	list-style: none;
	border: 1px solid #f0f0f0;
}

.list-item-header{
	padding: 10px 8px;
	font-size: 12px;
	background: #fafafa;
	color: #898989;
}

.list-item-content{
	display: flex;
	flex-direction: row;
	padding: 20px 0;
}

.content-item{
	padding: 0 20px;
	box-sizing: content-box;
}

.img-item{
	width: 100px;
}

.img-item img{
	width: 100%;
	cursor: pointer;
}

.desc-item{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex-grow: 1;
	text-align: left;
}

.desc-item .title{
	color: #313131;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

.desc-item .time{
	color: #898989;
	font-size: 12px;
}

.desc-item .detail{
	color: #313131;
	font-size: 12px;
}

.status-item{
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.status-item .scan{
	font-size: 14px;
	color: #333;
}

.status-item .scan>a{
	color: #f03;
	text-decoration: underline;
	margin-left: 5px;
}

.oprate-item{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100px;
	
}

.content-pagination-wrap{
	padding-top: 15px;
    text-align: right;
}
</style>